<!DOCTYPE html>
<html lang="en">

<head>
    <title>维修详情</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=yes">
    <link href="../css/global.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/repairDetail.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/echarts.js"></script>
    <link rel="stylesheet" href="../css/nutui/dist/nutui.css">
    <script src="../css/nutui/dist/nutui.js"></script>
</head>

<body>
    <div id="app">
        <div class="app_header">
            <div class="app_headerLeft" @click="back">
                <span class="iconfont icon-arrow-left-bold"></span>
            </div>
            <div class="app_headerTitle">报修信息</div>
        </div>
        <div class="app_main1">
            <div class="app_main1Head">
                <div class="state">待处理</div>
                <div class="title str">系统将停止工作,控制箱显示无水工作</div>
            </div>
            <div class="app_main1Item1">
                <div class="label">报修时间</div>
                <div class="txt">2022/02/18 16:00</div>
            </div>
            <div class="app_main1Item1">
                <div class="label">所在地址</div>
                <div class="txt">长沙市岳麓区枫林三路627号麓谷企业广场704</div>
            </div>
            <div class="app_main1Item1">
                <div class="label">详细描述</div>
                <div class="txt">供水设备缺水故障:系统将停止工作,控制箱显示无水工作供水设备缺水故障:系统将停止工作,控制箱显示无水工作供水设备缺水故障:系统将停止工作,控制箱显示无水工作.</div>
            </div>
            <div class="app_main1Item1">
                <div class="label">现场照片</div>
                <nut-row :gutter="10">
                    <nut-col :span="8" v-for="(item,index) in 4">
                        <div class="flex-content">
                            <img src="" alt="图片异常">
                        </div>
                    </nut-col>
                </nut-row>
            </div>
            <div class="app_main1Item2">
                <div class="txt">报修人：张三</div>
                <div class="txt">联系电话：18273110656</div>
                <a href="tel:10086" class="btn">联系TA</a>
            </div>
        </div>
        <div class="app_main2">
            <div class="app_main2Tabs">
                <div :class="[tabs == 1?'active':'']" @click="tabs = 1">时间轴</div>
                <div :class="[tabs == 2?'active':'']" @click="tabs = 2">完结说明</div>
            </div>
            <div class="app_main2Dom">
                <div class="app_main2DomList" v-if="tabs == 1">
                    <div class="mainStepsDom">
                        <div class="main_step">
                            <div v-for="(item, index) in timerzhou" :key="index">
                                <div v-if="index < timerzhou.length" class="step-number">
                                    <div class="active"></div>
                                </div>
                                <div v-if="index < timerzhou.length-1" class="step-gap">
                                    <div class="active"></div>
                                </div>
                            </div>
                        </div>
                        <div class="main_stepCont" v-for="(item, index) in timerzhou">
                            <div v-if="item.timerState == 1">
                                <div class="main_stepContTitle1">
                                    <div>{{item.timerStateName}}</div>
                                </div>
                            </div>
                            <div v-if="item.timerState != 1">
                                <div class="main_stepContTitle">
                                    <div>{{item.timerTime}}</div>
                                </div>
                                <div class="main_stepContItem" v-for="(it, index) in item.list">
                                    <div class="main_stepContTitleTips">{{it.timerTips}}</div>
                                    <div class="main_stepContTitletxt">{{it.timerName}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="app_main2DomList" v-if="tabs == 2">
                    <div class="app_mainList_item" v-for="(item, index) in 10">
                        <div class="app_mainList_itemTitle">李治</div>
                        <div class="app_mainList_itemTime">2022/01/12 16:00</div>
                        <div class="app_mainList_itemName">ALCW智能型无负压供水设备变频器故障</div>
                    </div>
                </div>
            </div>
            <div class="app_main2Btn">
                <div>导航</div>
                <div>完成</div>
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                tabs: 1,
                timerzhou: [
                    {
                        timerId: '1',
                        timerTime: '',
                        timerState: 1,
                        timerStateName: "待处理",
                        list: [
                            {
                                timerTips: "",
                                timerName: '',
                            }
                        ]
                    },
                    {
                        timerId: '2',
                        timerTime: '2022/03/34  16:23',
                        timerState: 2,
                        timerStateName: '已处理',
                        list: [
                            {
                                timerTips: "报修:系统将停止工作,控制箱显示无水工作",
                                timerName: '孙志浩4',
                            },
                            {
                                timerTips: "报修:系统将停止工作,控制箱显示无水工作",
                                timerName: '孙志浩3',
                            },
                        ]
                    }
                ],
            },
            mounted() { },
            methods: {
                back() {
                    window.history.go(-1)
                }
            }
        })
    </script>
</body>

</html>